import styled from "@emotion/styled";
import TopbarLeft from "./top-bar-left";
import TopbarRight from "./top-bar-right";
import { useRecoilState } from "recoil";
import { naviState } from "../../stores/navi";
import { memo } from "react";
/**
 * 顶部Bar
 */

const TopBar = () => {
  const [navi] = useRecoilState(naviState);
  return (
    <TopBarContainer
      style={{
        width: !navi.defaultOpenStatus
          ? "calc(100vw - 256px)"
          : "calc(100vw - 80px)",
      }}
    >
      <div className="top-bar-left">
        <TopbarLeft />
      </div>
      <div className="top-bar-right">
        <TopbarRight />
      </div>
    </TopBarContainer>
  );
};

export default memo(TopBar);

const TopBarContainer = styled.div`
  background-color: var(${`--white-color`});
  height: 64px;
  position: fixed;
  top: 0;
  right: 0;
  box-shadow: var(${`--top-bar-box-shadow`});
  display: flex;
  justify-content: space-between;
  .top-bar-left {
    height: 100%;
    display: flex;
    align-items: center;
  }
  .top-bar-right {
    height: 100%;
    display: flex;
    align-items: center;
  }
  .item {
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    height: 100%;
    display: flex;
    padding: 0 0.8rem;
    align-items: center;
    &:hover {
      background-color: var(${`--gary-100-color`});
    }
    &:active {
      background-color: var(${`--gary-300-color`});
    }
  }
  .item-breadcrumb {
    padding: 0 0.8rem;
  }
`;
